<script setup name="student">
import { ref,watchEffect,toRaw,onMounted,computed } from 'vue';
import { useRouter } from 'vue-router';
import { ElTable,ElTableColumn, ElPagination, ElSelect,ElOption, ElDialog,ElMessage } from 'element-plus';
import { Search, Plus,Document } from '@element-plus/icons-vue';
import service from '@/utils/request';

const router = useRouter();

//批量导入请求相关
const importTargetUrl = ref('http://192.168.116.86:8080/superadmin/student/upload');
const importHeader = ref({
    'Authorization': 'Bearer ' + localStorage.getItem('token'),
});

//表格数据相关
const tableData = ref([])
const pageNum = ref(1);
const pageSize = ref(5);
const totalSize = ref(0);
const selectable = (row) => row.state === "启用";

//搜索框相关
const searchRef = ref(null);
const searchValue = ref('');


const gradeMajorData = ref([]);//年级专业总数据
//表格Header选择年级框和选择专业框
const selectedTableGrade = ref("");//选中的年级
const selectedTableMajor = ref("");//选中的专业
const tableGradeOptions = computed(() => {//年级选择框选项
    if (!gradeMajorData.value.length) return [];
    const resault = gradeMajorData.value.map((item) => item.grade);
    selectedTableGrade.value = resault[0];
    return [...new Set(resault)];
})
const tableMajorOptions = computed(() => {//专业选择框选项
    if (!gradeMajorData.value.length) return [];
    const resault = (gradeMajorData.value.filter((item) => item.grade === selectedTableGrade.value));
    selectedTableMajor.value = Array.from(resault[0].majors)[0];
    return Array.from(resault[0].majors);
})
/* watchEffect(() => {
    if (gradeMajorData.value.length === 0) return;
    tableGradeOptions.value = gradeMajorData.value.map((item) => item.grade);
    //console.log(tableGradeOptions.value);
}) */

//新建学生相关
const isShowCreateStudent = ref(false);
const addStudentData = ref({
    name: '',
    id: '',
    grade: '',
    major: '',
    class: '',
    password: '',    
});
const majorClassOptions = ref([]);

const gradeOptions = computed(() => {//新建学生年级选择框选项
    //console.log(gradeMajorData.value);
    if (!gradeMajorData.value.length) return [];
    const resault = gradeMajorData.value.map((item) => item.grade);
    addStudentData.value.grade = resault[0];
    return [...new Set(resault)];
})

const majorOptions = computed(() => {//新建学生专业选择框选项
    if (!gradeMajorData.value.length || !addStudentData.value.grade) return [];
    const resault = (gradeMajorData.value.filter((item) => item.grade === addStudentData.value.grade));
    addStudentData.value.major = Array.from(resault[0].majors)[0];
    return Array.from(resault[0].majors);
})

const classOptions = computed(() => {//新建学生班级选择框选项
    if (!majorClassOptions.value.length || !addStudentData.value.major) return [];
    //console.log(majorClassOptions.value);
    const resault = majorClassOptions.value.filter((item) => item.major === addStudentData.value.major);
    addStudentData.value.class = Array.from(resault[0].classnames)[0];
    return Array.from(resault[0].classnames);
})

/* watchEffect(() => {
    if (majorClassOptions.value.length === 0) return;
    majorOptions.value = majorClassOptions.value.map((item) => item.major);
    console.log(majorOptions.value);
}) */

//对话框相关
const isShowResetPassword = ref(false);
const isShowImport = ref(false);
const isShowChangeState = ref(false);

//批量导出的数据
const selectedExportData = ref([]);

//重置密码相关
const resetPasswordData = ref({
    id: '',
    password: '',
});
// 添加密码相关响应式数据
const newPassword = ref('');
const confirmPassword = ref('');//确认密码
const errObj = ref({
    oldPasswordErr: "",
    newPasswordErr: "",
    confirmPasswordErr: "",
});



//获得表格数据
const fixedTableData = (list) => {
    if (!list || list.length === 0) return [];
    return list.map((item) => ({
        name: item.username,
        id: item.id,
        major: item.major,
        state: item.state,
        class: item.className,
        grade: item.grade,
        operation: {
            resetPassword: "重置密码",
            edit: "编辑",
            changeState: item.state === "启用" ? "启用" : "停用"
        },
    }));
};

const getTableData = (searchKey) => {
    service({
        method: "post",
        url: "/superadmin/student/select",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: {
            pageNum: pageNum.value,
            pageSize: pageSize.value
        },
        data: {
            query: searchKey,
            grade: selectedTableGrade.value,
            major: selectedTableMajor.value
        }
    }).then((res) => {
        //console.log("获取学生列表成功:",res);
        if(!res || !res.data) throw new Error("获取学生列表失败");
        tableData.value = fixedTableData(res.data.list || []);
        totalSize.value = res.data.total || 0;
    }).catch((error) => {
        ElMessage({
            message: error.message || "获取学生列表失败",
            type: 'error',
        });
    });
};

//获得年级和专业
const getGradeAndMajor = () => {
    service({
        method: "post",
        url: "/superadmin/teacher/grademajor",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
    }).then((res) => {
        //console.log(res);
        gradeMajorData.value = res.data || [];
    });
};

//年级选择框
const tableGradeChange = () => {
/*     gradeMajorData.value.forEach((item) => {
        if(item.grade === selectedTableGrade.value){
            tableMajorOptions.value = item.majors;
        }
    }); */
    getTableData(searchValue.value);
};

//专业选择框
const tableMajorChange = () => {
    getTableData(searchValue.value);
};

//搜索框相关
const searchChange = () => {
    getTableData(searchValue.value);
};

//新建学生相关
//获取专业和班级
const getMajorClass = () => {
    service({
        method: "get",
        url: "/superadmin/student/majorclass",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
    }).then((res) => {
        //console.log("专业班级数据:",res);
        majorClassOptions.value = res.data || [];
    });
};

// 修改年级变更处理函数
const gradeChange = () => {
    addStudentData.value.major = '';
    addStudentData.value.class = '';
    
    // 在方法中处理自动选择，而不是在计算属性中
    if (gradeMajorData.value.length > 0) {
        const gradeItem = gradeMajorData.value.find(item => item.grade === addStudentData.value.grade);
        if (gradeItem && gradeItem.majors && gradeItem.majors.length > 0) {
            addStudentData.value.major = gradeItem.majors[0];
        }
    }
};

// 修改专业变更处理函数
const majorChange = () => {
    addStudentData.value.class = '';
    
    // 在方法中处理自动选择，而不是在计算属性中
    if (majorClassOptions.value.length > 0) {
        const majorItem = majorClassOptions.value.find(item => item.major === addStudentData.value.major);
        if (majorItem && majorItem.classnames && majorItem.classnames.length > 0) {
            addStudentData.value.class = majorItem.classnames[0];
        }
    }
};

const addStudentClick = () => {
    if(!addStudentData.value.name || !addStudentData.value.id || !addStudentData.value.grade || !addStudentData.value.major || !addStudentData.value.class || !addStudentData.value.password){
        ElMessage({
            message: "请填写完整信息",
            type: 'error',
        });
        return;
    }
    service({
        method: "post",
        url: "/superadmin/student/add",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            name: addStudentData.value.name,
            id: addStudentData.value.id,
            grade: addStudentData.value.grade,
            major: addStudentData.value.major,
            clas: addStudentData.value.class,
            password: addStudentData.value.password
        }
    }).then((res) => {
        //console.log(res);
        if(res.message === "请求正常"){
            isShowCreateStudent.value = false;
            for(let k in addStudentData.value){
                addStudentData.value[k] = '';
            }
            ElMessage({
                message: '添加成功',
                type: 'success',
            });
            getTableData(searchValue.value);
        }
    }).catch((error) => {
        ElMessage({
            message: "添加学生失败",
            type: 'error',
        });
    });
};

const cancelStudentClick = () => {
    isShowCreateStudent.value = false;
    for(let k in addStudentData.value){
        addStudentData.value[k] = '';
    }
};

//批量导入文件相关
const downloadModelClick = () => {
    const elink = document.createElement('a');
    elink.style.display = 'none';
    elink.href = "https://qzy-1342857676.cos.ap-guangzhou.myqcloud.com/批量导入学生模板.xlsx";
    document.body.appendChild(elink);
    elink.click();
    document.body.removeChild(elink);
};

const fileImportSuccess = (res) => {
    //console.log(res);
    if (res.message == '请求正常') {
        getTableData('');
        ElMessage({
            message: '导入成功',
            type: 'success',
        });
        isShowImport.value = false;
    } else {
        ElMessage({
            message: '导入失败 ' + res.data.errors[0].errorMessage,
            type: 'error',
        });
    }
};

const fileImportError = (res) => {
    ElMessage({
        message: '导入失败',
        type: 'error',
    });
};

//点击批量导出相关
const selectionChange = (data) => {
    selectedExportData.value = data.map((item) => item.id);
};

const exportClick = () => {
    if(selectedExportData.value.length === 0){
        ElMessage({
            message: '请选择成员',
            type: 'warning',
        });
        return;
    }
    service({
        method: "post",
        url: "/superadmin/student/export",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: toRaw(selectedExportData.value),
        responseType: 'blob'
    }).then((res) => {
        if(res.data.message === '服务器内部错误'){
            ElMessage({
                message: '导出失败',
                type: 'error',
            });
            return;
        }
        const blob = new Blob([res.data]);
        const fileName = '学生导出.xlsx';
        const elink = document.createElement('a');
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click();
        document.body.removeChild(elink);
        ElMessage({
            message: '导出成功',
            type: 'success',
        });
    });
};

//点击表格的操作
const resetPasswordClick = (row) => {
    isShowResetPassword.value = true;
    resetPasswordData.value.id = row.id;
};

const editClick = (row) => {
    router.push({
        path: '/superAdministrator/student/studentEdit',
        query: row,
    });
};

//点击改变状态
const changeState = ref({
    id: '',
    name: '',
});

const changeStateClick = (id, name) => {
    isShowChangeState.value = true;
    changeState.value.id = id;
    changeState.value.name = name;
};
const confirmClick = () => {
    service({
        method: "get",
        url: "/superadmin/student/change",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        params: {
            id: changeState.value.id,
        }
    }).then((res) => {
        if(res.message == '请求正常'){
            ElMessage({
                message: `修改${changeState.value.name}状态成功`,
                type: 'success',
            });
            getTableData(searchValue.value);
            isShowChangeState.value = false;
        } else {
            ElMessage({
                message: '修改失败',
                type: 'error',
            });
        }
    });
};

// 重置密码相关事件
const newPasswordInput = () => {//新密码输入框验证
    if (newPassword.value === '') {
        errObj.value.newPasswordErr = '新密码不能为空';
        return;
    }
    errObj.value.newPasswordErr = '';
}
const confirmPasswordInput = (event) => {//确认密码输入框验证
    if(event.target.value === '') {
        errObj.value.confirmPasswordErr = '确认密码不能为空';
        return;
    }
    if(event.target.value !== newPassword.value) {
        errObj.value.confirmPasswordErr = '两次输入的密码不一致';
        return;
    }
    errObj.value.confirmPasswordErr = '';
}
const resetPasswordSaveClick = (data) => {//重置密码保存按钮点击事件
    if (errObj.value.newPasswordErr || errObj.value.confirmPasswordErr) {
        ElMessage({
            message: errObj.value.newPasswordErr || errObj.value.confirmPasswordErr + '，请重新输入',
            type: 'warning',
        });
        return;
    }
    service({
        method: "post",
        url: "/superadmin/student/reset",
        headers: {
            Authorization: 'Bearer ' + localStorage.getItem('token'),
        },
        data: {
            id: resetPasswordData.value.id,
            password: data
        }
    }).then((res) => {
        if(res.message == '请求正常') {
            ElMessage({
                message: '重置成功',
                type: 'success',
            });
            isShowResetPassword.value = false;
            newPassword.value = '';
            errObj.value = {
                oldPasswordErr: "",
                newPasswordErr: "",
                confirmPasswordErr: "",
            };
        } else {
            ElMessage({
                message: '重置失败',
                type: 'error',
            });
        }
    });    
};
const resetPasswordCancelClick = () => {//重置密码取消按钮点击事件
    isShowResetPassword.value = false;
    newPassword.value = '';
    confirmPassword.value = '';
    errObj.value = {
        oldPasswordErr: "",
        newPasswordErr: "",
        confirmPasswordErr: "",
    };
};

//底部分页器相关事件
const handleSizeChange = (data) => {
    pageNum.value = data;
    getTableData(searchValue.value);
};

//组件挂载时获取数据
onMounted(() => {
    getTableData('');
    getGradeAndMajor();
    getMajorClass();
});
</script>

<template>
    <!-- 改变状态确认框 -->
    <el-dialog
        draggable
        v-model="isShowChangeState"
        width="30%"
        top="30vh"
        :close-on-click-modal="false"
        @close="isShowChangeState = false"
    >
        <template #header>
            <div class="changeStateHeader">确认是否停用</div>
        </template>
        <template #default>
            <div class="changeStateContent">停用后，改账号将无法登录系统，且无法继续使用相关功能。如需恢复，可在学生管理者重新启用。</div>
        </template>
        <template #footer>
            <div class="changeStateFooter">
                <div class="cancel" @click="isShowChangeState = false">取消</div>
                <div class="confirm" @click="confirmClick">确认停用</div>
            </div>
        </template>
    </el-dialog>
    
    <!-- 重置密码 -->
    <div class="resetPassword">
        <el-dialog 
            draggable
            :model-value="isShowResetPassword" 
            width="40%" 
            top="30vh"
            :show-close="false"
            :open-delay="100"
            :close-on-click-modal="false"
        >
        <!-- 标题部分 -->
            <template #header>
                <div class="dialogTitle">
                    <div class="line"></div>
                    <div>重置密码</div>
                </div>
            </template>
            <!-- 内容部分 -->
            <template #default>
                <div class="dialogContent">
                    <div class="newPassword">
                        <div class="title">
                            <span>新密码：</span>
                        </div>
                        <div class="inputPart">
                            <input 
                                type="text" 
                                v-model="newPassword"
                                @keyup.enter="newPasswordInput"
                                @blur="newPasswordInput"
                            >
                            <div class="err">{{ errObj.newPasswordErr }}</div>
                        </div>
                    </div>
                    <div class="confirmPassword">
                        <div class="title">
                            <span>确认密码：</span>
                        </div>
                        <div class="inputPart">
                            <input 
                                type="text"
                                v-model="confirmPassword"
                                @keyup.enter="confirmPasswordInput"
                                @blur="confirmPasswordInput"
                            >
                            <div class="err">{{ errObj.confirmPasswordErr }}</div>
                        </div>
                    </div>
                    <div class="footer">
                        <div class="save" @click="resetPasswordSaveClick(newPassword)">保存</div>
                        <div class="cancel" @click="resetPasswordCancelClick">取消</div>
                    </div>
                </div>
            </template>
        </el-dialog>        
    </div>

    <!-- 批量导入对话框 -->
    <el-dialog
        draggable
        v-model="isShowImport"
        width="50%"
        top="20vh"
        :close-on-click-modal="false"
        @close="isShowImport = false"
    >
        <template #header>
            <div class="importHeader">批量导入</div>
        </template>
        <template #default>
            <div class="importContent">
                <div class="item">
                    <span>下载模板</span>
                    <el-icon size="100"><Document /></el-icon>
                    <span class="downloadBtn" @click="downloadModelClick">
                        <span>下载</span>
                        <span class="iconfont icon-daoru"></span>                        
                    </span>
                </div>
                <div class="item">
                    <span>导入文件</span>
                    <el-icon size="100"><Document /></el-icon>
                    <el-upload
                    :headers="importHeader"
                    :action="importTargetUrl"
                    :on-success="fileImportSuccess"
                    :on-error="fileImportError"
                    :show-file-list="false"
                    >
                        <span class="importBtn">导入</span>
                    </el-upload>
                </div>
            </div>
        </template>
    </el-dialog>
    
    <!-- 新建学生对话框 -->
    <el-dialog 
        draggable
    :model-value="isShowCreateStudent" 
    width="50%" 
    top="10vh" 
    :show-close="false"
    :close-on-click-modal="false"
    >
        <template #header>
            <div class="createStudentHeader">新建学生信息</div>
        </template>
        <template #default>
            <div class="createStudentContent">
                <div class="item">
                    <span class="title">姓名</span>
                    <input type="text" placeholder="请输入" v-model="addStudentData.name">
                </div>
                <div class="item">
                    <span class="title">学号</span>
                    <input type="text" placeholder="请输入" v-model="addStudentData.id">
                </div>
                <div class="item">
                    <span class="title">年级</span>
                    <el-select 
                    v-model="addStudentData.grade" 
                    placeholder="请选择年级"
                    :style="{width: '20vw'}"
                    @change="gradeChange"
                    no-data-text="暂无年级"
                    >
                        <el-option v-for="item in gradeOptions" :label="item" :value="item" ></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="title">专业</span>
                    <el-select 
                    v-model="addStudentData.major" 
                    placeholder="请选择专业"
                    :style="{width: '20vw'}"
                    @change="majorChange"
                    no-data-text="请选择年级"
                    >
                        <el-option v-for="item in majorOptions" :label="item" :value="item" ></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="title">班级</span>
                    <el-select 
                    v-model="addStudentData.class" 
                    placeholder="请选择班级"
                    :style="{width: '20vw'}"
                    clearable
                    no-data-text="请选择专业"
                    >
                        <el-option v-for="item in classOptions" :label="item" :value="item"></el-option>
                    </el-select>
                </div>
                <div class="item">
                    <span class="title">初始密码</span>
                    <input type="text" placeholder="请输入" v-model="addStudentData.password">
                </div>
            </div>
        </template>
        <template #footer>
            <div class="createStudentFooter">
                <div class="cancel" @click="cancelStudentClick">取消</div>
                <div class="add" @click="addStudentClick">添加</div>
            </div>
        </template>
    </el-dialog>
    
    <!-- 学生管理内容 -->
    <div class="student">
        <div class="header">
            <span>学生管理</span>
        </div>
        <div class="content">
            <div class="dataTable">
                <!-- 搜索框和选择学年头部 -->
                <div class="tableHeader">
                    <div class="left">
                        <span>学生管理</span>
                    </div>
                    <div class="right">
                        <div class="search" ref="searchRef">
                            <input 
                            v-model="searchValue" 
                            type="text" 
                            placeholder="搜索" 
                            @change="searchChange"
                            />
                            <el-icon class="icon"><Search /></el-icon> 
                        </div>
                        <div class="selectGrade">
                            <el-select 
                            v-model="selectedTableGrade" 
                            placeholder="请选择年级"
                            :style="{width: '120px'}"  
                            @change="tableGradeChange"
                            no-data-text="暂无数据"
                            >
                                <el-option v-for="item in tableGradeOptions" :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="selectMajor">
                            <el-select 
                            v-model="selectedTableMajor" 
                            placeholder="请选择专业"
                            :style="{width: '160px'}"
                            
                            @change="tableMajorChange"
                            no-data-text="请选择年级"
                            >
                                <el-option v-for="item in tableMajorOptions"  :label="item" :value="item"></el-option>
                            </el-select>
                        </div>
                        <div class="createStudent" @click="isShowCreateStudent = true">
                            <span>新建学生</span>
                            <el-icon><Plus /></el-icon>
                        </div>
                        <div class="importStudent" @click="isShowImport = true">
                            <span>批量导入</span>
                            <span class="iconfont icon-daoru"></span>
                        </div>
                        <div class="exportStudent" @click="exportClick">
                            <span>批量导出</span>
                            <span class="iconfont icon-export"></span>
                        </div>
                    </div>
                </div>
                
                <!-- 数据表格 -->
                <div class="tableContent">
                    <el-table 
                    :data="tableData"
                    row-key="id"
                    :style="{width: '100%',border: '1px solid #ebeef5'}"
                    height="100%"
                    empty-text="暂无数据"
                    show-overflow-tooltip
                    :header-cell-style="{ color: '#000',background: '#f2f3f5'}"
                    @selection-change="selectionChange"
                    >
                        <el-table-column type="selection" width="55" :selectable="selectable"/>
                        <el-table-column align="left" prop="name" label="姓名" width="150"></el-table-column>
                        <el-table-column align="center" prop="id" label="学号" width="150"></el-table-column>
                        <el-table-column align="center" prop="grade" label="年级" width="150"></el-table-column>
                        <el-table-column align="left" prop="major" label="专业"></el-table-column>
                        <el-table-column align="center" prop="class" label="班级" width="150"></el-table-column>
                        <el-table-column align="center" prop="operation" label="操作" width="200" fixed="right">
                            <template #default="scope">
                                <span class="operation-link" @click="resetPasswordClick(scope.row)">{{ scope.row.operation.resetPassword }}</span>
                                <span style="color:#e5e6eb;padding: 0 3px;">|</span>
                                <span class="operation-link" @click="editClick(scope.row)">{{ scope.row.operation.edit }}</span>
                                <span style="color:#e5e6eb;padding: 0 3px;">|</span>
                                <span class="operation-link" @click="changeStateClick(scope.row.id, scope.row.name)">{{ scope.row.operation.changeState }}</span>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                
                <!-- 底部分页器 -->
                <div class="tableFooter">
                    <div class="left">
                        <div class="total">共计: {{ totalSize }} 条</div>
                    </div>
                    <div class="right">
                        <div class="pagination">
                            <el-pagination
                                layout="prev, pager, next"
                                :total="totalSize"
                                :page-size="pageSize"
                                background
                                size="small"
                                @current-change="handleSizeChange"
                            />
                        </div>
                        <div class="selector">
                            <el-select 
                                v-model="pageSize" 
                                placeholder="每页条数" 
                                style="width: 80px;"
                                size="small"
                                @change="getTableData(searchValue)"
                            >
                                <el-option label="5条/页" :value="5" selected />
                                <el-option label="10条/页" :value="10" />
                                <el-option label="20条/页" :value="20" />
                            </el-select>
                        </div>
                        <div class="jump">
                            <span class="title">前往:</span>
                            <input type="text" v-model="pageNum" @change="getTableData(searchValue)" />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
@use "sass:color";
// 颜色变量
$primary-color: #4c6fb4;
$danger-color: #eb5757;
$danger-hover: #ff6b6b;
$gray-color: #909399;
$gray-hover: #a0a2a5;
$bg-light: #f1f2f3;
$bg-lighter: #f2f3f5;
$border-color: #cacacb;
$text-primary: #000000;
$text-secondary: #86909c;
$text-tertiary: #8e96a0;
$success-color: #00af1d;
$inactive-color: #898989;
$enable-color: #96ce71;
$disable-color: #eb5757;
// 重置密码对话框样式
.resetPassword {
    .dialogTitle{
        display: flex;
        align-items: center;
        gap: 5px;
        font-size: 20px;
        font-weight: 500;
        .line{
            width: 4px;
            height:20px;
            border-radius: 2px;
            background-color: #2d5cf6;
        }
    }
    .dialogContent{
        margin-top: 30px;
        width: 100%;
        padding-left: 5px;
        display: flex;
        flex-direction: column;
        gap: 40px;
        font-weight: 500;
        .newPassword, .confirmPassword{
            width: 100%;
            display: flex;
            align-items: center;
            .title{
                font-size: 16px;
                width: 90px;
                &::before{
                    content: '*';
                    color: $danger-color;
                }
            }
            .inputPart{
                position: relative;
                input{
                    width: 15vw;
                    height: 3.5vh;
                    border: none;
                    border-radius: 5px;
                    background-color: $bg-lighter;
                    text-indent: 5px;
                    transition: all 0.3s ease;
                    &:focus{
                        outline: 2px solid $primary-color;
                        box-shadow: 0 0 5px rgba(76, 109, 180, 0.5);
                    }
                }
                .err{
                    position: absolute;
                    top: 3.5vh;
                    left: 0;
                    font-size: 10px;
                    color: $danger-color;
                }
            }
        }
        .footer{
            width: 100%;
            margin-top: 10px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap:20px;
            font-weight: 400;
            font-size: 15px;
            .save{
                width: 5vw;
                height: 3.5vh;
                border-radius: 5px;
                background-color: $primary-color;
                text-align: center;
                line-height: 3.5vh;
                color:white;
                cursor: pointer;
                transition: all 0.3s ease;
                &:hover{
                    background-color: color.adjust($primary-color, $lightness: -5%);
                }
            }
            .cancel{
                width: 5vw;
                height: 3.5vh;
                border-radius: 5px;
                background-color: $bg-lighter;
                text-align: center;
                line-height: 3.5vh;
                color: $text-primary;
                cursor: pointer;
                transition: all 0.3s ease;
                &:hover{
                    background-color: color.adjust($bg-lighter, $lightness: -5%);
                }
            }
        }
    }
}
// 改变状态确认框样式
.changeStateHeader {
    font-size: 18px;
    font-weight: 500;
}

.changeStateContent {
    padding: 20px 0;
    color: $text-primary;
    line-height: 1.5;
}

.changeStateFooter {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    
    .cancel, .confirm {
        width: 80px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .cancel {
        background-color: $bg-lighter;
        color: $text-primary;
        
        &:hover {
            background-color: color.adjust($bg-lighter, $lightness: -5%);
        }
    }
    
    .confirm {
        background-color: $danger-color;
        color: white;
        
        &:hover {
            background-color: $danger-hover;
        }
    }
}

// 批量导入对话框样式
.importHeader {
    font-size: 18px;
    font-weight: 500;
}

.importContent {
    display: flex;
    justify-content: space-around;
    padding: 20px 0;
    
    .item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
        
        .downloadBtn, .importBtn {
            width: 70px;
            height: 30px;
            border-radius: 6px;
            background-color: $primary-color;
            color: white;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
            font-size: 14px;
            transition: all 0.3s ease;
            
            &:hover {
                background-color: color.adjust($primary-color, $lightness: -5%);
            }
        }
    }
}

// 新建学生对话框样式
.createStudentHeader {
    font-size: 18px;
    font-weight: 500;
}

.createStudentContent {
    width: 100%;
    .item {
        width: 100%;
        margin-top: 20px;
        display: flex;
        align-items: center;
        gap: 20px;
        
        .title {
            width: 70px;
            text-align: right;
            position: relative;
            
            &::before {
                content: "*";
                position: absolute;
                right: -10px;
                color: $danger-color;
            }
        }
        
        input {
            width: 20vw;
            height: 40px;
            border: 1px solid $border-color;
            border-radius: 6px;
            padding: 0 12px;
            font-size: 14px;
            color: $text-primary;
            transition: all 0.3s ease;
            
            &:focus {
                border-color: $primary-color;
                box-shadow: 0 0 0 2px rgba(76, 109, 180, 0.2);
                outline: none;
            }
            
            &::placeholder {
                color: $text-secondary;
            }
        }
    }
}

.createStudentFooter {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 20px;
    
    .cancel, .add {
        width: 80px;
        height: 36px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        cursor: pointer;
        transition: all 0.3s ease;
    }
    
    .cancel {
        background-color: $bg-lighter;
        color: $text-primary;
        
        &:hover {
            background-color: color.adjust($bg-lighter, $lightness: -5%);
        }
    }
    
    .add {
        background-color: $primary-color;
        color: white;
        
        &:hover {
            background-color: color.adjust($primary-color, $lightness: -5%);
        }
    }
}

// 学生管理主页面
.student {
    width: 100%;
    height: 100%;
    font-weight: 500;
    
    .header {
        width: 100%;
        height: 60px;
        padding-left: 20px;
        display: flex;
        align-items: center;
        border-top: 1px solid $border-color;
        border-bottom: 1px solid $border-color;
        background-color: white;
        font-size: 23px;
        color: $text-primary;
    }
    
    .content {
        width: 100%;
        height: calc(100% - 60px);
        padding: 20px;
        background-color: $bg-light;
    }
    
    .dataTable {
        width: 100%;
        height: 100%;
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
        
        .tableHeader {
            width: 100%;
            padding: 16px 20px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid $border-color;
            
            .left {
                width: 200px;
                font-size: 20px;
                font-weight: 600;
                color: $text-primary;
            }
            
            .right {
                display: flex;
                align-items: center;
                gap: 12px;
                
                .search {
                    position: relative;
                    display: flex;
                    align-items: center;
                    width: 20vw;
                    height: 4vh;
                    border-radius: 6px;
                    background-color: $bg-lighter;
                    transition: all 0.3s ease;
                    overflow: hidden;
                    
                    &:hover {
                        background-color: #e9ecef;
                    }
                    
                    &:focus-within {
                        outline: 2px solid $primary-color;
                        background-color: white;
                    }
                    
                    input {
                        width: calc(100% - 40px);
                        height: 100%;
                        border: none;
                        outline: none;
                        background: transparent;
                        padding: 0 12px;
                        font-size: 14px;
                        color: $text-primary;
                    }
                    
                    .icon {
                        width: 40px;
                        height: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        color: $text-secondary;
                        cursor: pointer;
                    }
                }
                
                .selectGrade, .selectMajor {
                    flex-shrink: 0;
                }
                
                .createStudent, .importStudent, .exportStudent {
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    gap: 6px;
                    padding: 0 16px;
                    height: 36px;
                    border-radius: 6px;
                    font-size: 14px;
                    font-weight: 500;
                    cursor: pointer;
                    transition: all 0.3s ease;
                    flex-shrink: 0;
                }
                
                .createStudent {
                    background-color: $primary-color;
                    color: white;
                    
                    &:hover {
                        background-color: color.adjust($primary-color, $lightness: -5%);
                        box-shadow: 0 2px 8px color.adjust($primary-color, $alpha: 0.3);
                    }
                }
                
                .importStudent, .exportStudent {
                    border: 1px solid $primary-color;
                    color: $primary-color;
                    
                    &:hover {
                        color: white;
                        background-color: color.adjust($primary-color, $alpha: 0.05);
                        border-color: color.adjust($primary-color, $lightness: -5%);
                    }
                }
            }
        }
        
        .tableContent {
            flex: 1;
            padding: 0 20px;
            overflow: hidden;
            
            .state-启用 {
                color: $enable-color;
            }
            
            .state-已停用 {
                color: $inactive-color;
            }
            
            .operation-link {
                color: $primary-color;
                cursor: pointer;
                transition: color 0.3s ease;
                
                &:hover {
                    color: color.adjust($primary-color, $lightness: -10%);
                    text-decoration: underline;
                }
            }
        }
        
        .tableFooter {
            width: 100%;
            padding: 16px 20px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            border-top: 1px solid $border-color;
            
            .left {
                font-size: 14px;
                color: $text-secondary;
            }
            
            .right {
                display: flex;
                align-items: center;
                gap: 16px;
                
                .jump {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    .title {
                        font-size: 14px;
                        color: $text-secondary;
                    }
                    
                    input {
                        width: 60px;
                        height: 32px;
                        text-align: center;
                        border: 1px solid $border-color;
                        border-radius: 4px;
                        transition: all 0.3s ease;
                        
                        &:focus {
                            border-color: $primary-color;
                            outline: none;
                            box-shadow: 0 0 0 2px rgba(76, 109, 180, 0.2);
                        }
                    }
                }
            }
        }
    }
}
</style>